<template>
  <div class="chatroom-messages" id="messagelist">
    <chatroom-messages-item
      v-for="item in messages"
      :key="item.id"
      :id="item.id"
      :user="item.data.user"
      :message="item.data.message"
      :type="item.data.type"
      :dtype="item.data.dtype"
      :data="item.data.data"
      @on-message-click="$emit('on-message-click',item.id)"
    ></chatroom-messages-item>
  </div>
</template>
<script>
import ChatroomMessagesItem from './ChatroomMessagesItem'
export default {
  name: 'chatroom-messages',
  props: {
    messages: {
      type: Array,
      required: true,
      validator: messages => {
        messages.forEach(message => {
          if (typeof message.id !== 'number') return false
          var data = message.data
          if (!data.user || !data.message || !data.type) return false
          if (typeof data.user !== 'string') return false
          if (typeof data.message !== 'string') return false
          if (typeof data.type !== 'string') return false
          if (['self', 'other', 'system'].indexOf(data.type) < 0) {
            return false
          }
          if (typeof data.dtype !== 'string') return false
          if (data.dtype !== 'text' && !data.data) {
            return false
          }
          if (data.type === 'system' && data.dtype !== 'text') {
            return false
          }
        })
        return true
      },
    },
  },
  components: {
    ChatroomMessagesItem,
  },
}
</script>
<style lang="scss" scoped>
.chatroom-messages {
  width: 100%;
  overflow: hidden;
  overflow-y: scroll;
  padding-right: 5px;
  flex: 1;
}
</style>
